<template>
  <div>
    <HeadNav type="main"></HeadNav>
    <div class="register">
      <div class="register-form">
        <div class="title">
          <!--          <img style="width: 30px;height: 30px;border-radius: 5px" src="../../assets/logo.png">-->
          <div style="margin-left: 10px;font-size: 18px;font-weight: bold">
            开启索存
          </div>
        </div>

        <div style="width: 100%;display: flex;flex-direction: column;align-items: flex-start">
          <div class="register-form-item">
            <div class="item-title">账号</div>
            <input v-model="registerForm.tel" style="height: 30px"/>
          </div>
          <div class="register-form-item">
            <div class="item-title">密码</div>
            <input v-model="registerForm.password" style="height: 30px" type="password"/>
          </div>
          <div class="register-form-item">
            <div class="item-title">重复密码</div>
            <input v-model="registerForm.rePassword" style="height: 30px" type="password"/>
          </div>
          <div class="register-form-item">
            <div class="item-title">昵称</div>
            <input v-model="registerForm.nickname" style="height: 30px"/>
          </div>
        </div>


        <div class="register-form-button">
          <button @click="register" style="background-color: white;height: 40px;width: 100px;border-radius: 5px">注册
          </button>
        </div>
        <div class="toLogin" style="margin-top: 20px;text-decoration:underline;font-size: 12px;margin-bottom: 20px"
             @click="$router.push({name:'login'})">已有账号？前往登录
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import HeadNav from "@/components/HeadNav";

export default {
  name: "RegisterView",
  components: {
    HeadNav
  },
  data() {
    return {
      registerForm: {
        tel:"",
        password:"",
        rePassword:"",
        nickname:""
      }
    }
  },
  methods: {
    register(){
      if(this.registerForm.password !== this.registerForm.rePassword){
        this.$message.error("两次密码不一致")
      }else{
        this.$api.register(this.registerForm).then(()=>{
          this.$message.info("注册成功！")
          this.$router.push({
            name:'login'
          })
        })
      }
    }
  },
}
</script>

<style scoped lang="scss">
.register {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  .register-form {
    margin-top: 200px;
    width: 350px;
    background-color: #2c2c2c;
    border-radius: 5px;

    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;

    .title {
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .register-form-item {
      margin-top: 20px;
      margin-left: 5px;
      font-size: 14px;
      display: flex;
      flex-direction: row;
      width: 300px;
      justify-content: space-between;
      align-items: center;

      .item-title{
        width:80px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
      }

      input{
        width: 200px;
      }

    }

    .register-form-button {
      margin-top: 20px;
    }

    .toLogin:hover {
      cursor: pointer;
    }
  }
}
</style>
